<template>
  <div class="content_card">
    <UHeader>
      <template slot="left">
        <el-input
          size="small"
          style="width: 200px"
          placeholder="请输入内容">
          <i slot="prefix" class="el-input__icon el-icon-search"/>
        </el-input>
      </template>
      <div slot="right">
        <el-button type="success" size="mini" @click="openDialog">添加车型</el-button>
      </div>
    </UHeader>
    <UTable ref="mTable" :search-api="search" :config="config" :columns="columns" :show-del="true" :show-add="true" @on-add="showDialog=true"/>

    <el-dialog :visible.sync="showDialog" :append-to-body="true" title="编辑车型" width="700px">
      <el-steps :active="stepsActive" finish-status="wait">
        <el-step title="上传" icon="el-icon-picture"/>
        <el-step title="编辑" icon="el-icon-edit"/>

        <!--<el-step title="配制" icon="el-icon-menu"/>-->
      </el-steps>
      <DragUpload v-if="stepsActive===1" :image-url.sync="editForm.thumb" style="margin-top: 15px"/>
      <el-form v-if="stepsActive===2" :model="editForm" label-width="80px" style="margin-top: 15px" label-position="left">

        <el-form-item label="名称" >
          <el-input v-model="editForm.typeName" autocomplete="off" placeholder="请输入类型名称"/>
        </el-form-item>
        <el-container direction="horizontal">
          <el-form-item label="长度(m)">
            <el-input v-model="editForm.lenght" autocomplete="off" type="number" min="100" placeholder="请输入长度"/>
          </el-form-item>
          <el-form-item label="高度(m)" style="margin-left: 15px">
            <el-input v-model="editForm.height" autocomplete="off" type="number" min="100" placeholder="请输入长度"/>
          </el-form-item>
        </el-container>
        <el-container direction="horizontal" >
          <el-form-item label="宽度(m)">
            <el-input v-model="editForm.width" autocomplete="off" type="number" min="100" placeholder="请输入长度"/>
          </el-form-item>
          <el-form-item label="载重量(吨)" style="margin-left: 15px">
            <el-input v-model="editForm.weight" autocomplete="off" type="number" min="100" placeholder="请输入长度"/>
          </el-form-item>
        </el-container>

        <el-form-item label="备注">
          <el-input v-model="editForm.remark" type="textarea" autocomplete="off" placeholder="说点什么吧.."/>
        </el-form-item>
      </el-form>

      <div v-if="stepsActive===3" style="margin-top: 15px">
        <el-alert
          title="温馨提示"
          type="info"
          description="该配制会同步到现已开放的区域,如果不需要请点击省略并保存"/>
        <UTable :columns="feescalColums" :auto-load-data="false" :config="{border: true,defaultClass:true}" :local-data="localData"/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="flex: 1" @click="next">{{stepsActive===2?'保存':'下一步'}}</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
import UHeader from '@/components/UHeader'
import UTable from '@/components/UTable'
import DragUpload from '@/components/DragUpload'
import { baseTableConfig } from '@/utils/baseConfig'
import { getCarTypes, add } from '@/api/car'
import columns from './columns'
export default {
  components: {
    UTable, UHeader, DragUpload
  },
  data() {
    return {
      localData: [{ defalutKm: 0.00, exceedPrice: 0.00, wideCityPrice: 0.00, interCityPrice: 0.00 }],
      feescalColums: [
        { prop: 'defalutKm', label: '有效里程数', type: 'edit' },
        { prop: 'exceedPrice', label: '超出价格', type: 'edit' },
        { prop: 'wideCityPrice', label: '同城起步价', type: 'edit' },
        { prop: 'interCityPrice', label: '城际起步价', type: 'edit' }
      ],
      stepsActive: 1,
      search: getCarTypes,
      config: baseTableConfig,
      columns: columns,
      editForm: {},
      showDialog: false
    }
  },
  methods: {
    openDialog() {
      this.editForm = {}
      this.showDialog = true
      this.localData = [{ defalutKm: 0.00, exceedPrice: 0.00, wideCityPrice: 0.00, interCityPrice: 0.00 }]
      this.stepsActive = 1
    },
    saveCarType(isMore) {
      const ob = {carType: this.editForm }
      if (isMore) {
        ob.feescal = this.localData
      }

      add({ params: JSON.stringify(ob) }).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.showDialog = false
        this.$refs.mTable.refresh()
      })
        .catch(_ => {
          this.isSaveLoadin = false
        })
    },
    next() {
      switch (this.stepsActive) {
        case 2:
          this.saveCarType(false)
          break
        default:
          this.stepsActive += 1
          break
      }
    }
  }
}
</script>

<style scoped>

</style>
